<template>
    <div class="message-admin">
        <div class="list" v-for="item in dataList">
            <div class="list-date">{{item.date}}</div>
            <div class="list-content">
                <div class="title"><span>留言类型：{{item.title}}</span><span><i></i></span></div>
                <div class="text">
                    <div>留言内容：<span>{{item.content}}</span></div>
                    <div>回复状态：<span>{{item.state}}</span></div>
                </div>
                <div class="details-btn app-right-icon">查看详细</div>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
    @import '../../../style/variable';
    .message-admin{
        background-color: #F8F8F8;
        overflow:hidden;
        .list {
            text-align: center;
            padding: 0 1.3rem;
            margin-top: 1.5rem;
            &-date {
                background: #DCDCDC;
                color: #333E48;
                font-size: 1.2rem;
                display: inline-block;
                padding: 0.2rem 0.6rem;
                border-radius: 0.4rem;
            }
            &-content {
                background: #fff;
                border-radius: 0.4rem;
                text-align: left;
                margin-top: 1.1rem;
                .title {
                    border-bottom: 1px solid #F2F2F2;
                    color: #333E48;
                    font-size: 1.3rem;
                    line-height: 1.9rem;
                    font-weight: 550;
                    padding: 1rem 2.5rem 1rem 1.5rem;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    span:nth-of-type(2){
                        position: relative;
                        width: 0.3rem;
                        height: 0.3rem;
                        background-color: #272536;
                        border-radius: 50%;
                    }
                    span:nth-of-type(2)::before{
                        content: " ";
                        position: absolute;
                        right: 0.5rem;
                        top: 0;
                        width: 0.3rem;
                        height: 0.3rem;
                        background-color: #272536;
                        border-radius: 50%;
                        display: block;
                    }
                    span:nth-of-type(2)::after{
                        content: " ";
                        position: absolute;
                        left: 0.5rem;
                        top: 0;
                        width: 0.3rem;
                        height: 0.3rem;
                        background-color: #272536;
                        border-radius: 50%;
                        display: block;
                    }
                }

                .text {
                    border-bottom: 1px solid #F2F2F2;
                    padding: 1rem 1.5rem 0 1.5rem;
                    font-size: 1.3rem;
                    div:nth-of-type(1), div:nth-of-type(2) {
                        margin-bottom: 0.5rem;
                        color: #676767;
                        span {
                            color: #333E48;
                        }
                    }
                }
                .details-btn {
                    color: #178FF2;
                    padding: 1rem 1.5rem;
                }
            }
        }
    }
</style>

<script>
    export default {
        data(){
            const dataList = Array(6).fill({
                title: '建议',
                content: '您好！您注册的信息已成功提交，我们会在一个小时之内完成审核注册工作。',
                state: '已回复',
                date: '2018.06.22 17:23',
            });

            return {
                dataList
            }
        },
        created(){
            this.$store.commit('hideNav', true);
        }
    }
</script>